<!-- 用户中心 -->
<template>
  <div>
    <wbc-nav></wbc-nav>
    <div class="container">
      <div v-show="isEdit" class="tcommonBox">
        <header>
          <h1>
            编辑个人资料
          </h1>
        </header>
        <section>
          <ul class="userInfoBox">
            <li class="avatarlist">
              <span class="leftTitle">头像</span>
              <el-upload
                class="avatar-uploader"
                :headers="uploadHeader"
                :action="uploadUrl"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload">
                <img v-if="editForm.imgUrl!==''" :src="editForm.imgUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                <div slot="tip" class="el-upload__tip">点击上传头像，只能上传jpg/png文件，且不超过1mb</div>
              </el-upload>
            </li>
            <li >
              <span class="leftTitle">用户名</span>
              <el-input v-model="editForm.username" placeholder="用户名" :disabled="true"></el-input>
              <i class="fa fa-wa fa-asterisk"></i>
            </li>
            <li class="username">
              <span class="leftTitle">昵称</span>
              <el-input v-model="editForm.nickname"  @change="checkNickName" placeholder="昵称"></el-input>
              <i class="fa fa-wa fa-asterisk"></i>
              <i v-if="!canSave" style="font-size: 12px;color: #F56C6C" class="fa fa-wa">{{ errorTip }}</i>
            </li>
            <li>
              <span class="leftTitle">电子邮件</span>
              <span>{{editForm.email}}</span>
            </li>
            <li>
              <span class="leftTitle">性别</span>
              <template>
                <el-radio class="radio" v-model="editForm.sex" :label="1">男</el-radio>
                <el-radio class="radio" v-model="editForm.sex" :label="0">女</el-radio>
              </template>
            </li>
            <li>
              <span class="leftTitle">个性标签</span>
              <template>
                <el-radio-group v-model="editForm.label">
                  <el-radio v-for="(item,index) in usertab" :key="'usertab'+index" :label="item">{{item}}</el-radio>
                </el-radio-group>
              </template>
            </li>
            <li>
              <span class="leftTitle">是否展示友链</span>
              <el-switch
                v-model="editForm.isshare"
                on-color="#13ce66"
                off-color="#aaa">
              </el-switch>
            </li>
            <li v-show="editForm.isshare">
              <span class="leftTitle">网站名称</span>
              <el-input v-model="editForm.webName" placeholder="网站名称"></el-input>
              <i v-show="editForm.isshare" class="fa fa-wa fa-asterisk"></i>
            </li>
            <li v-show="editForm.isshare">
              <span class="leftTitle">网站地址</span>
              <el-input v-model="editForm.webAddr" placeholder="网站" ></el-input>
              <i v-show="editForm.isshare" class="fa fa-wa fa-asterisk"></i>
            </li>
            <li v-show="editForm.isshare">
              <span class="leftTitle">网站简介</span>
              <el-input
                type="textarea"
                :rows="3"
                placeholder="请输入内容"
                v-model="editForm.webDescription">
              </el-input>
              <i v-show="editForm.isshare" class="fa fa-wa fa-asterisk"></i>
            </li>
            <li v-show="editForm.isshare" class="avatarlist">
              <span class="leftTitle">网站logo</span>
              <!-- 上传图片 -->
              <!-- :action="this.$store.state.host+'Userinfo/UploadImg'" -->
              <!-- action="http://www.vuebook.com/port/Userinfo/UploadImg" -->
              <el-upload
                class="avatar-uploader"
                :headers="uploadHeader"
                :action="uploadUrl"
                :show-file-list="false"
                :on-success="handleLogoSuccess"
                :before-upload="beforeLogoUpload">
                <img v-if="editForm.webImgUrl" :src="editForm.webImgUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                <div slot="tip" class="el-upload__tip">点击上传头像，只能上传jpg/png文件，且不超过1mb</div>
              </el-upload>
            </li>
          </ul>
          <div class=" saveInfobtn">
            <a class="tcolors-bg" href="javascript:void(0);" @click="isEdit=!isEdit">返 回</a>
            <a v-if="canSave" class="tcolors-bg" href="javascript:void(0);" @click="saveInfoFun">保 存</a>
          </div>
        </section>
      </div>
      <div v-show="!isEdit" class="tcommonBox">
        <header>
          <h1>
            个人中心
            <span class="gotoEdit" @click="editUser"><i class="fa fa-wa fa-edit"></i>编辑</span>
          </h1>

        </header>
        <section>
          <ul class="userInfoBox">
            <li class="avatarlist">
              <span class="leftTitle">头像</span>
              <div class="avatar-uploader">
                <img :src="userForm.imgUrl?userForm.imgUrl:$store.state.errorImg" class="avatar">
              </div>
            </li>

            <li >
              <span class="leftTitle">用户名</span>
              <span>{{userForm.username}}</span>
            </li>
            <li class="username">
              <span class="leftTitle">昵称</span>
              <span>{{userForm.nickname===null?userForm.username:userForm.nickname}}</span>
            </li>
            <li>
              <span class="leftTitle">电子邮件</span>
              <span>{{userForm.email===''?'保密':userForm.email}}</span>
            </li>
            <li>
              <span class="leftTitle">性别</span>
              <span>{{userForm.sex===1?'男':'女'}}</span>
            </li>
            <li>
              <span class="leftTitle">个性标签</span>
              <span>{{userForm.label!==''?userForm.label:"未设置"}}</span>
            </li>
            <li>
              <span class="leftTitle">是否展示友链</span>
              <el-switch
                disabled>
              </el-switch>
            </li>
            <li>
              <span class="leftTitle">网站名称</span>
              <span>{{userForm.webName!==''?userForm.webName:"无"}}</span>
            </li>
            <li>
              <span class="leftTitle">网站地址</span>
              <p class="rightInner">{{userForm.webAddr!==''?userForm.webAddr:"无"}}</p>
            </li>
            <li>
              <span class="leftTitle">网站简介</span>
              <p class="rightInner">{{userForm.webDescription!==''?userForm.webDescription:"无"}}</p>
            </li>
            <li class="avatarlist">
              <span class="leftTitle">网站logo</span>
              <div class="avatar-uploader">
                <img :src="userForm.webImgUrl!==null?userForm.webImgUrl:$store.state.errorImg" class="avatar">
              </div>
            </li>
          </ul>
        </section>
      </div>
    </div>
    <wbc-footer></wbc-footer>
  </div>
</template>

<script>
  import header from '../components/header.vue'
  import footer from '../components/footer.vue'
  import {getInfo,editUser,getUserByNickName} from "../api/user"
  import {getToken} from "../utils/auth";

  export default {
    name: 'UserInfo',
    components: { //定义组件
      'wbc-nav': header,
      'wbc-footer': footer
    },
    created() { //生命周期函数
      this.initUserInfo()
    },

    data() { //选项 / 数据
      return {
        userForm:{
          imgUrl:'',
          nickname:'',//昵称
          email:'',
          sex:true,
          label:'',
          isshare:true,
          webName:'',
          webAddr:'',
          webDescription:'',
          webImgUrl:'',
          username:'' //用户名
        },
        editForm:{
          imgUrl:'',
          nickname:'',
          email:'',
          sex:true,
          label:'',
          isshare:true,
          webName:'',
          webAddr:'',
          webDescription:'',
          webImgUrl:'',
          username:''
        },
        isEdit: false,
        canSave:true,//是否能保存
        errorTip:'',//错误提示
        uploadUrl: process.env.UP_LOAD,
        uploadHeader:{
          "Authorization":"Bearer "+getToken()
        },
        state: true, //是否展示友链开关
        usertabChosed: '天然呆',
        usertab: [//用户标签
          "天然呆",
          "小萌新",
          "学霸",
          "萌萌哒",
          "技术宅",
          "忠实粉"
        ],
      }
    },
    methods: { //事件处理器
      initUserInfo:function(){
        getInfo(getToken()).then(response =>{
            //抓取用户信息
            this.userForm = response.data
        })
      },
      editUser:function(){
        this.isEdit = true
        this.editForm=JSON.parse(JSON.stringify(this.userForm));
      },
      handleAvatarSuccess(res, file) {//上传头像
          // this.userForm.imgUrl = res.data.path  TODO 暂时不用云存储
          this.editForm.imgUrl = process.env.VUE_BLOG_URL+"/static/upload/"+res.data.fileName
      },
      handleLogoSuccess(res, file) { //上传网站logo
        this.editForm.webImgUrl = process.env.VUE_BLOG_URL+"/static/upload/"+res.data.fileName
      },
      beforeAvatarUpload(file) {//判断头像大小
        const isJPG = file.type == 'image/png' || file.type == 'image/jpg' || file.type == 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 1;
        // console.log(file);
        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG/JPEG/PNG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 1MB!');
        }
        return isJPG && isLt2M;
      },
      beforeLogoUpload(file) { //控制网站logo图片大小
        const isJPG = file.type == 'image/png' || file.type == 'image/jpg' || file.type == 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 1;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG/JPEG/PNG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 1MB!');
        }
        return isJPG && isLt2M;
      },

      checkNickName:function(){
        let usernameRegex = /^[\u4e00-\u9fa5_a-zA-Z0-9]{3,11}$/  // 匹配中文，英文字母和数字及_  3-11的长度
        if(!usernameRegex.test(this.editForm.nickname)){
          this.canSave = false
          this.errorTip = '昵称长度为3-11位字符，可包括中文、英文、字母、数字及_'
        }else {
          getUserByNickName(this.editForm.nickname).then(response =>{
            if(response.data!==null){
              this.canSave = false
              this.errorTip = '昵称太抢手已被占用啦~！'
            }else{
              this.canSave = true
              this.errorTip = ''
            }
          })
        }
      },

      saveInfoFun: function () {//保存编辑的用户信息
        let that = this
        this.checkEditForm()
        editUser(this.editForm).then(response =>{
          that.$message("修改成功！")
          that.initUserInfo()
          that.isEdit = false
        })
      },
      checkEditForm:function () {
        //TODO 校验
        if(!this.editForm.isshare){
          this.editForm.webImgUrl = ''
          this.editForm.webAddr=''
          this.editForm.webName=''
          this.editForm.webDescription=''
        }
      }
    }
  }
</script>

<style>
  .userInfoBox .avatarlist {
    position: relative;
  }

  .avatar-uploader {
    display: inline-block;
    vertical-align: top;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 120px;
    height: 120px;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #20a0ff;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 120px;
    height: 120px;
    line-height: 120px;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
  }

  .avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    display: block;
    object-fit: cover;
  }

  .gotoEdit {
    font-size: 15px;
    float: right;
    cursor: pointer;
    color: #999;
  }

  .gotoEdit:hover {
    color: #333;
  }

  /*个人设置*/
  .userInfoBox .leftTitle {
    display: inline-block;
    width: 100px;
    padding: 10px 0;
  }

  .userInfoBox .rightInner {
    display: inline-block;
    max-width: calc(100% - 140px);
    vertical-align: top;
  }

  .userInfoBox li {
    padding: 20px;
    border-bottom: 1px solid #ddd;
  }

  .userInfoBox li:last-child {
    border-bottom: 1px solid transparent;
  }

  .userInfoBox .el-input, .userInfoBox .el-textarea {
    max-width: 300px;
    min-width: 100px;
  }

  .userInfoBox .el-input__inner {
    border-radius: 4px;
  }

  .userInfoBox .el-textarea {
    vertical-align: top;
  }

  .saveInfobtn {
    margin: 20px 0;
    text-align: center;
  }

  .saveInfobtn a {
    color: #fff;
    padding: 6px 20px;
    margin: 5px 10px;
    border-radius: 5px;
    font-size: 14px;
  }

  .userInfoBox .fa-asterisk {
    color: #DF2050;
  }
</style>
